.tran {
	transition: all .2s;
	-webkit-transition: all .2s;
}

.nowrap {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px #e2e2e2; //rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 6px #e2e2e2; //rgba(0, 0, 0, 0.3);
	background-color: #F5F5F5;
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb {
	background-color: #d2d2d2; //#3d4a5dd9;
	border-radius: 5px;
}

a {
	text-decoration: none;
	color: #656565;
}

ul {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	.kitim-show {
		display: block;
	}
	.kitim-hide {
		display: none;
	}
	font-size: 12px;
	font-family: "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	.kitim-tips {
		border-radius: 100%;
		.layui-layer-content {
			border-radius: 100%;
			.kitim-tips-main {
				width: 50px;
				height: 50px;
				line-height: 50px;
				font-size: 20px;
				border-radius: 100%;
				text-align: center;
				cursor: pointer;
				background-color: #ffffff;
				i.fa {
					color: #2F4056;
				}
				&:hover {
					background-color: #2F4056;
					.tran();
					i.fa {
						color: #ffffff;
					}
				}
			}
		}
	}
	.kitim {
		.layui-layer-title {
			padding: 0 80px;
			height: 55px;
		}
		.layui-layer-setwin {
			top: 20px;
		}
		.layui-layer-resize {
			z-index: 2222;
		}
		.kitim-show {
			display: block !important;
		}
		.kitim-header {
			position: relative;
			&-profile {
				display: inline-block;
				width: 38px;
				height: 38px;
				border-radius: 100%;
				position: absolute;
				top: 7px;
				left: -67px;
				z-index: 10;
				cursor: pointer;
				border: 1px solid #ffffff;
				img {
					width: 38px;
					height: 38px;
					border-radius: 100%;
				}
				&:hover {
					border: 1px solid #eeeeee;
					.tran();
				}
			}
			&-tools {
				text-align: center;
				line-height: 55px;
				.kitim-item {
					display: inline-block;
					width: 55px;
					color: #656565;
					i.fa {
						font-size: 20px;
					}
					&:hover {
						cursor: pointer;
						color: #333;
						background-color: #eeeeee;
						.tran();
					}
				}
				.kitim-this {
					color: #333;
					background-color: #eeeeee;
				}
			}
		}
		.kitim-main {
			height: 100%;
			&-left {
				width: 180px;
				height: 100%;
				position: absolute;
				left: 0;
				background-color: #f7f7f7;
				overflow-x: hidden;
				.kitim-chat,.kitim-contact,.kitim-files{
					display: none;
				}
				.kitim-chat {

				}
				.kitim-contact {
					&-tabs {
						text-align: center;
						border-bottom: 1px solid #eeeeee;
						li {
							display: inline-block;
							border-bottom: 1px solid #f7f7f7;
							span {
								color: #656565;
								display: block;
								padding: 10px 5px;
								cursor: pointer;
								border-radius: 2px;
							}
						}
						li:hover, > .kitim-this {
							background-color: #eeeeee;
							border-bottom: 1px solid #333;
							.tran();
							span {
								color: #333;
							}
						}
					}
					&-friends, &-groups, &-discuss {
						display: none;
					}
					.kitim-contact-group {
						.kitim-contact-item:first-child {
							margin-top: 8px;
						}
						.kitim-contact-item {
							position: relative;
							>i.fa {
								position: absolute;
								left: 10px;
								top: 6px;
								font-size: 14px;
								color: #656565;
							}
							i.fa-caret-down {
								left: 8px;
							}
							>.kitim-contact-name {
								color: #333;
								display: block;
								padding: 5px 10px 5px 20px;
								cursor: pointer;
								.nowrap();
							}
							// &:hover {
							// 	background-color: #eeeeee;
							// 	.tran();
							// 	>i.fa {
							// 		color: #333;
							// 	}
							// }
						}
					}
				}
				.kitim-files{

				}
				
				.kitim-show {
					.kitim-contact-list,.kitim-chat-list {
						display: block;
					}
				}
				
				.kitim-contact-list,.kitim-chat-list {
					display: none;
					li:first-child {
						margin-top: 8px;
					}
					li {
						position: relative;
						padding: 5px 0;
						> .kitim-profile {
							margin-left: 10px;
							img {
								width: 40px;
								height: 40px;
								border-radius: 100%;
							}
						}
						> .kitim-name {
							position: absolute;
							top: 5px;
							left: 50px;
							padding-left: 5px;
							span {
								line-height: 40px;
								padding-right: 20px;
								cursor: default;
								width: 101px;
								.nowrap();
							}
						}
						&:hover {
							background-color: #eeeeee;
							border-radius: 3px;
							.tran();
							i.fa {
								display: block;
								.tran();
							}
						}
							i.fa {
								display: none;
								position: absolute;
								right: 9px;
								top: 19px;
								cursor: pointer;
								font-size: 14px;
								color: #333;
								&:hover {
									color: #FF5722;
								}
							}
					}
					.kitim-this {
						background-color: #eeeeee;
					}
				}
			}
			&-content {
				position: absolute;
				left: 180px;
				width: auto;
				height: 100%;
				right: 0;
				z-index: 999;
				overflow: hidden;
				overflow-y: auto;
				box-sizing: border-box;
				.kitim-chat,.kitim-contact,.kitim-files{
					display: none;
				}
				.kitim-chat {
					&-box {
						width: 100%;
						height: 383px;
						overflow: hidden;
						overflow-y: auto;
						.kitim-chat-messages {
							width: 100%;
							height: auto;
							overflow-y: auto;
							>ul {
								margin: 0;
								padding: 10px;
								.kit-chat-systemtips, .kit-chat-moremsg {
									text-align: center;
								}
								.kit-chat-systemtips {
									padding: 5px 0 8px 0;
									span {
										color: #333;
									}
								}
								.kit-chat-moremsg {
									a {
										display: block;
										padding: 10px 0 15px;
										&:hover {
											color: #333;
										}
									}
								}
								.kitim-item {
									position: relative;
									margin-bottom: 15px;
									a {
										display: block;
										position: absolute;
										img {
											width: 40px;
											height: 40px;
											border-radius: 100%;
										}
									}
									.kitim-chat-msgbox {
										margin-left: 50px;
										min-height: 40px;
										span {
											padding-bottom: 5px;
											display: block;
										}
										.kitim-chat-msg {
											display: inline-block;
											background-color: #e2e2e2;
											border-radius: 7px;
											p {
												margin: 0;
												padding: 5px 8px;
												line-height: 22px;
												img {
													cursor: pointer;
													width: 100%;
													height: 100%;
												}
											}
										}
									}
								}
								.kitim-chat-right {
									text-align: right;
									a {
										right: 0;
									}
									.kitim-chat-msgbox {
										margin-right: 50px;
									}
								}
							}
						}
					}
					&-tools {
						height: 30px;
						line-height: 30px;
						width: 100%;
						border-top: 1px solid #f2f2f2;
						>ul {
							margin: 0;
							padding: 0 10px;
							>li {
								display: inline-block;
								text-align: center;
								a {
									display: block;
									width: 30px;
									color: #656565;
									font-size: 14px;
									&:hover {
										color: #333;
										background-color: #eeeeee;
									}
								}
							}
						}
					}
					&-footer {
						height: 130px;
						width: 100%;
						.kitim-chat-input {
							padding: 0px 10px 10px 10px;
							textarea {
								width: 99%;
								height: 75px;
								border: 0px;
								resize: none;
								outline: none;
								color: #656565;
								font-size: 12px;
							}
						}
						.kitim-chat-btn {
							text-align: right;
							padding: 0 10px;
							button {
								cursor: pointer;
								border: 0;
								background-color: #01AAED;
								padding: 4px 10px;
								border-radius: 3px;
								color: #ffffff;
								&:hover {
									background-color: #1E9FFF;
									.tran();
								}
							}
						}
					}
				}
				.kitim-contact {
					&-friends, &-groups, &-discuss {
						display: none;
						.kitim-contact-empty {
							margin-top: 150px;
							text-align: center;
							p {
								font-weight: bolder;
								font-size: 16px;
								color: #c2c2c2;
							}
						}
					}
				}
			}
			&-right {
				width: 180px;
			}
		}
	}
}